<template>
  <div v-loading="loading">
    <el-input clearable placeholder="请输入用户ID" size="small" style="width: 200px;" v-model="query.user_id"></el-input>
    <el-input clearable placeholder="请输入用户名" size="small" style="width: 200px;" v-model="query.user_name"></el-input>
    <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期"
      value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="start_timeFun">
    </el-date-picker>
    <el-button @click="page = 1; init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
    <el-button @click="page = 1; init()" icon="el-icon-refresh-right" size="small" type="primary"
      style="margin-left: 2px;">刷新</el-button>
    <div class="flexBox" style="margin-top: 20px;">
      <div v-for="(item, index) in data" :key="index" class="videoBox hand" @mouseleave="handleMouseLeave(item)">
        <el-image style="width: 100%; height: 280px" :src="item.first_frame" fit="cover" v-if="item.first_frame"
          v-show="currentPlay != item.creation_id" @mouseenter="handleMouseEnter(item)"></el-image>
        <div :id="'dplayer' + item.creation_id"
          style="width: 100%;height: 280px;border-top-left-radius: 15px;border-top-right-radius: 15px;"
          v-show="currentPlay == item.creation_id"></div>
        <div class="" style="padding: 10px;font-size: 14px;color: #333;">
          <div class="omit1">
            {{ item.creation_name }}
          </div>
          <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
            <UserInfo :user_id="item.user_id" :userInfos="item.author" v-if="item.user_id">
            </UserInfo>

            <div @click="toDetails('/short-video-details?id=' + item.creation_id)" style="color: #409eff;">
              详情
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- 分页组件 -->
    <el-card body-style="padding:10px" class="box-card mt-10">
      <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
        layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
    </el-card>
  </div>
</template>

<script>
import initData from '@/mixins/index'
import DPlayer from 'dplayer'
import Hls from 'hls.js'
export default {
  name: "short-video-index",
  mixins: [initData],
  data() {
    return {
      query: {
        contain_delete: 0,
        user_id: '',
        user_name: ''
      },
      times: "",
      datas: [],
      video_play: false,
      currentPlay: -1,//当前播放
      allow_contr: false, //运行控制
      muted: true,//控制声音
      video: {
        currentTime: 0,
        duration: 0,
        percentage: 0,
      },
    }
  },
  watch: {
    '$route'(to, from) {
      console.log('路由参数发生变化')
      if (this.$route.query.name) {
        this.query.user_name = this.$route.query.name
      }

      this.beforeInit()

      this.allow_contr = true

    }
  },
  mounted() {
    if (this.$route.query.name) {
      this.query.user_name = this.$route.query.name
    }

    this.beforeInit()

    this.allow_contr = true

  },
  methods: {
    toDetails(url) {
      this.$router.push({ path: url });
    },
    reasonShowFun(id) {
      this.disableID = id
      this.reasonShow = true
    },
    start_timeFun(e) {
      console.log(e)
      this.query.start_time = e[0]
      this.query.end_time = e[1]
    },
    beforeInit() {
      this.url = '/creation/index?creation_type=short'
      this.init() //重新请求数据
    },
    getShortList(id) {
      this.$request.get('/creation/index', this.query).then((res) => {
        this.datas = res.items
        console.log('短视频', res)
      })
    },

    initPlayer(item) {
      let video_info
      if (item.media_urls.length == 0) {
        console.log('m3u8')
        video_info = {
          url: item.m3u8_media, // 播放视频的路径
          type: 'customHls',
          customType: {
            customHls: function (video) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            },
          },
          thumbnails: item.first_frame,
          pic: item.first_frame, // 视频封面图片
        }
      } else {
        console.log('mp4')
        video_info = {
          url: item.media_urls[0], // 播放视频的路径
          pic: item.first_frame, // 视频封面图片
          // thumbnails: this.item.first_frame,
        }
      }
      let dom = 'dplayer' + item.creation_id
      this.player = new DPlayer({
        container: document.getElementById(dom),
        volume: 1,
        loop: true, // 是否自动循环
        lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
        hotkey: false,
        danmaku: false, // 关闭弹幕
        contextmenu: [],
        preload: 'none', // 自动预加载
        mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        video: video_info,
      })
      // this.player.play() //自动播放
    },

    handleMouseLeave(item) {
      this.currentPlay = -1
      if ((this.allow_contr = false)) {
        return false
      }
      this.muted = true
      if (this.muted) {
        this.player.volume(0, true, false)
      } else {
        this.player.volume(0.7, true, false)
      }
      // let video = document.getElementById(item.creation_id).querySelector('video')
      // this.$nextTick(() => {
      //     video.removeEventListener('timeupdate', this.watchVideo)
      // })
      this.player.destroy()
      this.player = null
      this.video_play = false
      this.play = false
    },
    handleMouseEnter(item) {
      console.log('item', item)

      this.initPlayer(item)
      this.currentPlay = item.creation_id
      if ((this.allow_contr = false)) {
        return false
      }
      this.player.seek(this.video.currentTime)
      this.video_play = true
      this.muted = false
      if (this.muted) {
        this.player.volume(0, true, false)
      } else {
        this.player.volume(0.7, true, false)
      }
      this.player.play()
      this.$nextTick(() => {
        // let video = document.getElementById(item.creation_id).querySelector('video')
        // video.addEventListener('timeupdate', this.watchVideo(item))
      })
      this.play = true
    },
    watchVideo(item) {
      let video = document.getElementById(item.creation_id).querySelector('video')
      if (this.muted) {
        this.player.volume(0, true, false)
      } else {
        this.player.volume(0.7, true, false)
      }
      this.video.currentTime = video.currentTime
      let value = (video.currentTime / video.duration) * 100
      this.video.percentage = value > 100 ? 100 : value
      if (this.video.percentage + '' == 'NaN') {
        this.video.percentage = 0
      }
    },
  }

}
</script>

<style lang="scss" scoped>
/deep/.dplayer-setting-icon {
  visibility: hidden !important;
}

.videoBox {
  background-color: #ffffff;
  width: 304px;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 5px #e7e7e7;
}

.flexBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.hand {
  cursor: pointer;
}


.omit1 {

  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 超出部分用省略号表示 */
}
</style>